<template>
    <div class='hospital'>
        <div class="header">
            <div><i class="el-icon-user-solid"></i>上海市</div>
            <div>医疗救治定点医院和发热门诊一览</div>
        </div>
        <!-- 医院展示区 -->
        <div class="content" style='margin-top:160px;'>
            <div style='width:200px;margin-bottom:10px;'>
                <el-input
                    placeholder="请输入医院名称"
                    v-model="params.name"
                    
                    clearable>
                </el-input>
            </div>
            <div>
                <el-row v-for='(item,index) in tableData' :key='item.id'>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <div class="left">
                                <!-- <div class='circle'>{{index+1}}</div> -->
                                <span class='circle'>{{index+1}}</span>
                                <div class='hName'>{{item.name}}</div>
                                <!-- <span class="tag"></span>  -->
                                <div ><el-tag type="warning" effect="dark" color='orange' size='small'>{{item.flags}}</el-tag></div>
                                <div class='address'>{{item.province}} {{item.city}} {{item.area}}</div>
                            </div>
                            <div class="right">
                                <div style='text-align:center'><i class="el-icon-location-information" style='font-size:26px;color:royalblue'></i></div>
                                <div style='color:#999;'>2365km</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<style>
.content {
    background-color: #f8f8f8;
}
.address {
    color:#999;
    font-size:14px;
}
.tag {
      background-color: orange;
      color:white;
      font-size: 14px;
      padding: 4px;
      border-radius: 5px;
      margin-top:10px;
      display:block;
  }
    .header {
        font-size:20px;
        font-weight:700;
        color:white;
        height:150px;
        background-image:url('http://121.199.29.84/visual/static/img/bg1.efce26ef.png');
        padding:50px;
        position:absolute;
        left:0;
        top:0;
        right:0;
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
        margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #f8f8f8;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 100px;
        padding:0 10px
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .icon-user {
        font-size:26px;
    }
    .left {
        float:left;
        height:90px;
    }
    .right {
        float:right;
        height:90px;
    }
    .left div {
        line-height:30px
    }
    .right div {
        line-height:30px
    }
    .circle {
        width:20px;
        height:20px;
        border-radius: 50%;
        background-color: #f4f4f4;
        line-height:20px;
    }
    .circle,.hName {
        display: inline-block;
        text-align:center;
    }
</style>

<script>
import axios from '@/http/axios'
export default {
    data(){
        return {
            tableData:[],
            params:{
                page:1,
                pageSize:10
            }
        }
    },
    watch:{
        params:{
            handler:function(){
                this.queryHospital();
            },deep:true
        }
        
    },
    created(){
        this.queryHospital()
    },
    methods:{
        queryHospital(){
            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                this.tableData = res.data.data.list
            })
        }
    }
}
</script>